<template>
    <transition name="slide">
        <music-list :title="title" :bgImage="bgImage" :songs="songs"></music-list>
    </transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import { mapGetters } from 'vuex'
import { getSongList } from 'api/recommend'
import { ERR_OK } from 'api/config'
import { createRecommendSong } from 'common/js/song'

export default {
    data() {
        return {
            songs: []
        }
    },
    created() {
        this._getSongList()
    },
    components: {
        MusicList
    },
    computed: {
        title() {
            return this.disc.dissname
        },
        bgImage() {
            return this.disc.imgurl
        },
        ...mapGetters([
            'disc'
        ])
    },
    methods: {
        _getSongList() {
            // 刷新后返回的操作
            if (!this.disc.dissid) {
                this.$router.push('/recommend')
                return 
            }
            getSongList(this.disc.dissid).then((res) => {
                if (res.data.code === ERR_OK) {
                    this.songs = this._normalizeSongs(res.data.cdlist[0].songlist)
                    console.log(this.songs)
                }
            })
        },

        // 格式化音乐操作
        _normalizeSongs(list) {
            let ret = []
            list.forEach((musicData) => {
                if (musicData.id && musicData.album.id) {
                    ret.push(createRecommendSong(musicData))
                }
            })
            return ret
        }
    }
}
</script>

<style lang="stylus" scoped>
    .slide-enter-active, .slide-leave-active
        transition: all 0.3s
    .slide-enter, .slide-leave-to
        transform: translate3d(100%, 0, 0)
</style>